<template>
  <div class="home-center">
    <fs-waterfall
      :bottom="20"
      :column="3"
      :gap="10"
      :page-size="20"
      :request="getData"
      ref="childRef"
    >
      <template #item="{ item, index }">
        <div
          class="card-box"
          :style="{
            background: colorArr[index % (colorArr.length - 1)],
          }"
          @click="handleLink(item)"
        >
        <!-- <img :src="item.bgUrl" alt=""> -->
        <img style="display: block;margin: auto;cursor: zoom-out;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" :src="item.bgUrl" >
        <div class="card-text">{{ item.text }}</div>
          <!-- <img :src="item.url" /> -->
        </div>
      </template>
    </fs-waterfall>
  </div>
</template>

<script setup lang="ts">
import mockData from "./mock.ts";
import FsWaterfall from "./Waterfall.vue";
import { type ICardItem } from "./type";
import { ref, defineExpose } from "vue";

const {data} = await useFetch("/api/home?param1=abcd", {
  method: "GET",
  headers: { "Content-Type": "application/json" },
});
console.log('打印1111data===',data.value)

const colorArr = ["#409eff", "#67c23a", "#e6a23c", "#f56c6c", "#909399"];
const childRef = ref<any>(null);
const scrollBottom = () => {
  console.log(childRef.value);
  childRef.value.getCardList();
};

const list = [...mockData];

const getData = (page: number, pageSize: number) => {
  const res = useFetch("/api/home?param1=abcd", {
    method: "GET",
    headers: { "Content-Type": "application/json" },
  }).then(res=>{
    console.log('打印res===',res)
  })
  return new Promise<ICardItem[]>((resolve) => {
    setTimeout(() => {
      // resolve(list);
      resolve(list.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize));
    }, 100);
  });
};

const handleLink = (item: ICardItem) => {
  console.log(item);
  item.url&&window.open(item.url);
};

defineExpose({ scrollBottom });
</script>

<style scoped lang="scss">
.home-center {
  display: inline-block;
  position: relative;
  height: auto;
  flex: 1;
  //height: fit-content;
  margin: 2% 40px 60px;
  min-width: 400px;
  overflow: unset;
  background-color: #fff;
  border-radius: 10px;
  //width: 700px;
  //border: 1px solid red;
}

.card-box {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: #edeae8 1px solid;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  img{
    width: 100%;
    height: 100%;
  }

  .card-text{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 1px 5px;
    border-radius: 10px;
    color: #edeae8;
    background-color: rgba($color: #2e304e, $alpha: 0.5);
  }
}
</style>
